<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增角色')" />
    <th:block th:include="include :: header('日期和时间')" />
    <th:block th:include="include :: datetimepicker-css" />
    <script th:inline="javascript"> var ctx = [[@{/}]]; </script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-lab-add">
        <div class="form-group">
            <label class="col-sm-3 control-label ">实验室名称：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labName" id="labName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">实验室编号：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labCode" id="labCode" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label ">实验室地址：</label>
            <div class="col-sm-7">
                <input class="form-control" type="text" name="labAddress" id="labAddress" required>
            </div>
            <select id="select" name="firstCouretime" class="form-control m-b" th:with="type=${@classTime.selectTbClassTimeList()}" style="width:120px;display: none;">
                <option th:each="classtime : ${type}" th:text="${classtime.section}" th:value="${classtime.sectionNumber}"></option>
            </select>
        </div>
        <a class="btn btn-success" onclick="insertRow()">
            <i class="fa fa-plus"></i> 新增行
        </a>

        <a class="btn btn-danger" onclick="removeRow()">
            <i class="fa fa-remove"></i> 删除行
        </a>

        <div class="row">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table">
                </table>

            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    var prefix = ctx + "lab";
    $(function() {
        var options = {
            // url: prefix + "/list",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            uniqueId: "userId",
            height: 400,
            width:600,
            columns: [{
                checkbox: true
            },
                {
                    field : 'userId',
                    visible: false
                },
                {
                    field : 'beginTime',
                    title : '开始时间'
                },
                {
                    field : 'endTime',
                    title : '结束时间'
                },
                {
                    field : 'section',
                    title : '起始/结束(节)'
                },
                {
                    field : 'remark',
                    title : '备注'
                }]
        };
        $.table.init(options);
    });


    /*$(function(){
        <!-- datetimepicker示例 -->
        $("#labStartTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });

        $("#labEndTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true
        });
    });*/

    $("#form-lab-add").validate({
        onkeyup: false,
        rules: {
            labName: {
                minlength: 2,
                maxlength: 20,
            },
        },
        focusCleanup: true
    })
    function submitHandler() {
       /* if ($.validate.form()) {
            add();
        }*/
        if ($.validate.form()) {
            $.modal.confirm("确认要保存吗?", function () {
                    var form = new FormData(document.getElementById("form-lab-add"));
                    $.modal.loading("正在保存中......")
                    $.ajax({
                        url: prefix + "/add",
                        type: "post",
                        data: form,
                        cache: false,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == 500) {
                                var result={"code":"500","msg":data.msg}
                                //alert(result.msg)
                                $.operate.successCallback(result);
                                //$.modal.msgError(data.msg)
                            }
                            if (data.code == 0) {
                                $.modal.msgSuccess(data.msg)
                                var int = self.setInterval(function () {  // 这个方法是说在延迟两秒后执行大括号里的方法
                                    $.modal.reload();
                                }, 1000) //这里2000代表两秒

                            }
                        }
                    });
            });
        }
    }
    /*function add() {
        var labName = $("input[name='labName']").val();
        var labCode = $("input[name='labCode']").val();
        var labAddress = $("input[name='labAddress']").val();
        var labStartTime = $("input[name='labStartTime']").val();
        var labEndTime = $("input[name='labEndTime']").val();
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "lab/add",
            data : {
                "labName": labName,
                "labCode": labCode,
                "labAddress": labAddress,
                "labStartTime": labStartTime,
                "labEndTime": labEndTime,
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.operate.successCallback(data);
            }
        });
    }*/
    function insertRow(){
        var randomId = 100 + ~~(Math.random() * 100)
        var randomId2=randomId+1;
        $.btTable.bootstrapTable('insertRow', {
            index: 0, // 你想插入到哪，0表示第一行
            row: {
                userId: randomId,
                beginTime: "<input name=\"experimentBeginDate\" class=\"form-control\" id=\"datetimepicker-demo-"+randomId+"\" th:placeholder=\"yyyy-MM-dd\" onmouseover='fuzhi1("+randomId+")' data-format=\"yyyy-MM-dd\">",
                endTime: "<input name=\"experimenEndtDate\" class=\"form-control\" id=\"datetimepicker-demo-"+randomId2+"\" th:placeholder=\"yyyy-MM-dd\" onmouseover='fuzhi2("+randomId2+")' data-format=\"yyyy-MM-dd\">",
                section: aaa(),
                remark: '<input class=\"form-control\" type=\"text\" name=\"remark\" id=\"labName\" style="width:120px;">'
            }
        })
        fuzhi1(randomId);
        fuzhi2(randomId2);
    }
    var result="";

    /* function timefunction(randomId){
         return "<input name=\"experimentBeginDate\" class=\"form-control\" id=\"datetimepicker-demo-"+randomId+"\" placeholder=\"yyyy-MM-dd\" onclick='fuzhi("+randomId+")'>"
     }
     function timefunction2(randomId){
         return "<input name=\"experimenEndtDate\" class=\"form-control\" id=\"datetimepicker-demo-"+randomId+1+"\" placeholder=\"yyyy-MM-dd\" onclick='fuzhi("+randomId+1+")'>"
     }*/

    function fuzhi1(randomId){
        $('#datetimepicker-demo-'+randomId).datetimepicker({
            format: "yyyy-mm-dd",
            startView: 2,
            minView: "month",
            //startDate: new Date(),
            autoclose: true
        });
       /* document.getElementsByName('experimentBeginDate')[0].addEventListener('click',myfunc);
        document.getElementsByName('experimenEndtDate')[0].addEventListener('click',myfunc);
        function myfunc(e){
            e.currentTarget.blur();
        };*/
        /*});*/
    }
    function fuzhi2(randomId){
        $('#datetimepicker-demo-'+randomId).datetimepicker({
            format: "yyyy-mm-dd",
            startView: 2,
            minView: "month",
            //startDate: new Date(),
            autoclose: true
        });
    }




    $("#datetimepicker-demo-"+result).datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });



    function aaa(){
        var channelArr= new Array();
        var channelArrvals= new Array();
        var channel=$("#select").find("option");
        for(var i=0;i<channel.length;i++) {
            var channlVar = channel.eq(i).text();//option中的值
            var channelArrval = channel.eq(i).val();//option中的值
            channelArr.push(channlVar);
            channelArrvals.push(channelArrval);
        }
        console.log("行数"+channelArrval)
        var a="<div style=\"display:flex;\"><select name=\"sectionBegin\" class=\"form-control m-b\" style=\"width:100px;\" >";
        for(var i = 0; i <channelArr.length; i++){
            a=a+("<option value='"+channelArrvals[i]+"'>"+channelArr[i]+"</option>");
        }
        a=a+("</select>")
        a=a+("<span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>")
        a=a+"<select name=\"sectionEnd\" class=\"form-control m-b\" style=\"width:100px;\">";
        for(var i = 0; i <channelArr.length; i++){
            a=a+("<option value='"+channelArrvals[i]+"'>"+channelArr[i]+"</option>");
        }
        a=a+("</select></div>")
        return a;
    }
    /* 删除指定表格行 */
    function removeRow(){
        var ids = $.table.selectColumns("userId");
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.btTable.bootstrapTable('remove', {
            field: 'userId',
            values: ids
        })
    }


</script>
</body>
</html>
